<template>
    <view>
        <view class="searchbox">
            <view class="adress">
                <image class="adimg" src="https://daiyue.gzzhenyi.net/static/index/address.png" mode="widthFix"></image>
                <text>{{ user.location }}</text>
            </view>
            <van-search @search="searchChange" class="search" shape="round" placeholder="请输入搜索关键词" />
        </view>

        <view class="outList">
            <view class="outItem" v-for="item in list" :key="item" @tap="toNvative(item.id)">
                <image class="outItemImgImg" :src="baseUrl + item.images" mode="aspectFill"></image>
                <view class="outItemContent">
                    <view class="outItemTitle">{{ item.name }}</view>
                    <view class="outItemText">
                        <span class="outItemText-buld">{{ item.rank }}</span>
                        <span class="outItemText-bus">{{ item.is_public == 1 ? '公立' : '私立' }}</span>
                    </view>
                    <view class="outItemFlex">
                        <view class="outItemAddress">{{ item.addr }} </view>
                        <view class="outItemAddressKm">{{ item.km }}</view>
                    </view>
                    <view class="outItemContentText">{{ item.brief }}</view>
                    <view class="outItemSpan"><span>{{ item.departments }}</span> </view>
                </view>

            </view>
            <van-empty description="无数据" v-if="list.length == 0" />
        </view>
    </view>
</template>

<script>
import { getHospitalList } from '@/api/api'
import baseUrl from '@/api/baseUrl';
import { mapState } from "vuex"; ''
export default {
    data() {
        return {
            baseUrl,
            bgColor: ["#3A6DF9", "#FCAB78"],
            list: [
            ],
            longitude: '113.38',
            latitude: '22.94',
            keyword: '',
        }
    },
    computed: {
        ...mapState(["user"])
    },
    onLoad(options) {
        uni.getLocation({
            type: 'wgs84',
            success: (res) => {
                console.log(res)
                this.longitude = res.longitude
                this.latitude = res.latitude
            },
            fail: function (err) {
                console.log(err)
            }
        });
        this.hospitalList()
    },
    methods: {
        hospitalList() {
            let { latitude, longitude, keyword } = this
            let data = {
                limit: 100,
                latitude,
                longitude,
                keyword
            }
            getHospitalList(data).then(res => {
                if (res.code == 1) {
                    this.list = res.data
                }
            })
        },

        searchChange(e) {
            this.keyword = e.detail
            this.hospitalList()
        },
        toNvative(id) {
            uni.navigateTo({
                url: '/subCure/hospitalDetails/hospitalDetails?id=' + id
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.searchbox {
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;

    .adress {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 10rpx;
        font-size: 26rpx;

        .adimg {
            width: 22rpx;
            height: 26rpx !important;
            object-fit: cover;
        }
    }

    .search {
        flex: 1;
    }
}

.outList {
    padding: 30upx;

    .outItem {
        background-color: #fff;
        border-radius: 15upx;
        box-shadow: 0px 2px 8px 0px rgba(205, 205, 205, 0.2031);
        padding: 30upx 20upx;
        display: flex;
        margin-bottom: 30upx;

        .outItemImgImg {
            width: 100upx;
            height: 100upx;
            border-radius: 50%;
        }

        .outItemContent {
            flex: 1;
            margin-left: 20upx;

            .outItemTitle {
                color: #333333;
                font-size: 30upx;
                margin-bottom: 5upx;
            }

            .outItemText {
                display: flex;
                column-gap: 15upx;
                margin-bottom: 15upx;
                font-size: 20upx;
                color: #fff;
                text-align: center;

                .outItemText-bus {
                    background-color: #3A6DF9;
                    border-radius: 4upx;
                    padding: 5upx 10upx;
                }

                .outItemText-buld {
                    background-color: #FCAB78;
                    border-radius: 4upx;
                    padding: 5upx 10upx;

                }
            }
        }

        .outItemFlex {
            display: flex;
            align-items: center;
            font-size: 24upx;
            color: #878787;

            .outItemAddress {
                width: 420upx;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                word-break: break-all;
            }

            .outItemAddressKm {
                border-left: 1px solid #878787;
                padding-left: 10upx;
                margin-left: 5upx;

            }
        }

        .outItemContentText {
            font-size: 24upx;
            color: #333333;
            margin-top: 15upx;
            overflow: hidden;
            //省略两行
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

        }

        .outItemSpan {
            display: flex;

            span {
                font-size: 24upx;
                color: #333333;
                margin-top: 15upx;
                border-right: 1px solid #333333;
                padding-right: 10upx;
                margin-right: 10upx;
            }

            span:last-child {
                border: 0;
            }

        }
    }
}
</style>